<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" lang="zh_CN">
	<title>新建笔记</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 引入 Bootstrap -->
	<link rel="stylesheet" href="../css/bootstrap.min.css"/>
	<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
	<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
	<!--[if lt IE 9]>
	<script type="text/javascript" src="../js/html5shiv.js"></script>
	<script type="text/javascript" src="../js/respond.min.js"></script>
	<![endif]-->
	<!--AadminLTE基本资源-->
	<link rel="stylesheet" href="../css/font-awesome.min.css"/>
	<link rel="stylesheet" href="../css/style.css"/>
</head>
<body>
<div class="container" id="app">
	<div class="row clearfix" style="margin-bottom: -15px;">
		<a href="#top" id="toTop"></a>
		<nav class="navbar navbar-inverse" role="navigation">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">个人学习笔记网</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li>
						<a href="../index.html">首页</a>
					</li>
					<li>
						<a href="#">新建笔记</a>
					</li>
					<li>
						<a href="allType.html">全部分类</a>
					</li>
					<li>
						<a href="search.html">高级搜索</a>
					</li>
				</ul>
				<form class="navbar-form navbar-left" role="search" action="index.html">
					<div class="form-group">
						<input name="wd"
							   type="text"
							   class="form-control" placeholder="搜索笔记..."/>
					</div>
					<button type="submit" class="btn btn-default">搜索</button>
				</form>
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="javascript:nav_show();">网站导航</a>
					</li>
				</ul>
			</div>
		</nav>
	</div><!--The Header End-->
	<script>
        var nav_show = function () {
            qiao.bs.dialog({
                id : 'nav_index',
                url :'../public/nav.htm',
                head:false,
                foot:false,
                backdrop: true,
                big : true
            },function () {
                return true;
            });
        }
	</script>

	<div class="row">
			<div class="box box-primary">
				<div class="box-header">
					<h3 class="box-title">{{data.typename}}</h3>
					<div class="box-tools">
						<div class="input-group input-group-sm" style="width: 150px;">
							<input type="text" name="table_search" v-model="title"
								   class="form-control pull-right" placeholder="本页搜索">

							<div class="input-group-btn">
								<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
							</div>
						</div>
					</div>
				</div>
				<!-- /.box-header -->
				<div class="box-body table-responsive no-padding">
					<table class="table table-hover">
						<tbody>
						<tr>
							<th>序号</th>
							<th>笔记标题</th>
							<th>创建时间</th>
						</tr>
						<tr v-for="(item,index) in data.notes" v-if="checkName(item[1],title)">
							<td>{{index+1}}</td>
							<td><a class="a-btn" target="_blank"
								   v-bind:href="'next.html?id='+item[0]">
								{{item[1]}}</a></td>
							<td>{{moment(Number(item[2])).format('YYYY-MM-DD HH:mm:ss')}}</td>
						</tr>
						</tbody>
						<tfoot>
							<td colspan="4" id="pagination">
							</td>
						</tfoot>
					</table>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /.box -->
	</div>

	<div class="row">
		<div class="col-md-12 text-center footer">
					<span class="common">
			 	Copyright &copy;2017 湖南城市学院
			 	<a class="common" href="http://www.hncu.net" target="_blank">hncu.net</a>
			 	All Rights Reserved.
			 </span>
		</div>
	</div>
	<!--底部声明结束-->
</div>
</body>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/qiao.js"></script>
<script type="text/javascript" src="../js/jquery.scrollToTop.min.js"></script>
<script src="../js/moment.min.js"></script>
<script src="../js/verify.js"></script>
<script type="text/javascript" src="../js/vuejs/vue.min.js"></script>
<script type="text/javascript" src="../js/jquery.twbsPagination.min.js"></script>
<script type="text/javascript">
	$(function () {
		getCid(function () {
			getNextPage(1,8,data.cid,function () {
				resetPage();
			});
		});
	});

	var resetPage = function () {
		resetPageNum({
		    el:'#pagination',
			isOne:true,
			pageCount:data.pageCount,
			callback:function (page) {
				if(page == data.curPage) return;
                getNextPage(page,data.pageSize,data.cid);
            }
		});
    }

	var getCid = function (callback) {
		data.cid = qiao.search('cid');
		data.typename = decodeURIComponent(qiao.search('typename'));
		if(!verify(qiao.search('cid'),'int') ||
			isEmpty(decodeURIComponent(qiao.search('typename')))){
            toErrorPage();
		}else{
            if(typeof callback === "function"){
                callback();
            }
		}
    }

    data = {
        title:'',
		cid:1,
		curPage:1,
		pageSize:8,
		pageCount:1,
        count:1,
        notes:[],
		typename:''
    }

    var getNextPage = function (curPage,pageSize,cid,callback) {
		$.ajax({
		    type:'post',
			url:'getNotesByCid',
			data:{curPage:curPage,pageSize:pageSize,cid:cid},
			success:function (result) {
				data.notes = result.notes;
                data.curPage = result.curPage;
                data.pageCount = result.pageCount;
            },
			complete:function () {
				if(typeof callback === "function"){
					callback();
				}
            }
		});
    }

    var vue = new Vue({
        el:"#app",
        data:data,
        methods: {
            checkName: function(dt,name) {
                if(name.length === 0) {
                    return true;
                }
                var myReg;
                name = replaceSpecialChar(superTrim(name));
                eval("var myReg = /" + name + "/ig;");
                if(myReg.test(dt))
                    return true;
                return false;
            }
        }
    });

/**封装好的分页工具-jquery.twbsPagination.js
 * options{el:'#id'---显示分页的元素，div的id等
 * ,visiblePages:7--可见页码
 * ,pageCount:1--页总数
 * ,isOne:true,只有一页时不显示页码，false,只有一页时显示页码，默认false;
 * ,callback:function(page)},初始化和下一页执行的方法
 * -->page为下一页页码，从1开始
 * @param options
 */
    var resetPageNum = function (options) {
        var options = options || {};
        var el = options.el ||  '#pagination';
        var pageCount = options.pageCount || 1;
        var isOne = options.isOne || false;
        var visiblePages = options.visiblePages || 7;
        var callback = options.callback || function(){};
        $(el).html('');
        if(isOne && pageCount < 2) return;
        var t_id = 'page_id'+new Date().getTime();
        $(el).html(
            '<ul id="'+t_id+'" class="pagination-sm"></ul>');
        $("#"+t_id).twbsPagination({
            totalPages: pageCount,
            visiblePages: visiblePages,
            first:'首页',
            last:'末页',
            prev:'上一页',
            next:'下一页',
            onPageClick: function (event, page) {
                var el_li =
                    '<li class="disabled">' +
                    '<a class="page-link">总页数:' +
                    pageCount+'</a></li>';
                $("#"+t_id).append(el_li);
                if(typeof callback == "function"){
                    callback(page);
                }
            }
        });
    }
</script>
</html>